import React, { Component } from 'react';
import { NavBar, Swiper, Ellipsis, Toast } from 'antd-mobile'
import './Details.scss'
import { ShopbagOutline, StarOutline, UserContactOutline, StarFill } from 'antd-mobile-icons'
import service from '../../api'
class Details extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            bannerlist: [],
            proDetails: {},
            collect: false
        }
    }
    componentDidMount(): void {
        console.log(this.props.match.params.proid)
        var proid = this.props.match.params.proid
        service.pro.getProDetail(proid).then(res => {
            console.log(res);
            this.setState({
                proDetails: res.data.data,
                bannerlist: res.data.data.banners[0].split(',')
            })
        })
    }
    back() {
        // console.log(this.props);
        this.props.history.replace('/index/home')
    }
    addCart() {
        var userid = localStorage.getItem('userid')
        var proid = this.props.match.params.proid
        service.cart.addCart({ userid, proid, num: 1 }).then(res => {
            console.log(res)
            if (res.data.code === '200') {
                Toast.show({
                    content: res.data.message
                })
            }
            else {
                Toast.show({
                    content: '未登录，请先登录'
                })
                setTimeout(() => {
                    this.props.history.replace('/login')
                }, 1000);
            }
        })
    }
    isCollect() {
        this.setState({
            collect: !this.state.collect
        }, () => {
            if (this.state.collect) {
                Toast.show({
                    content: '已收藏',
                    afterClose: () => {
                        console.log('after')
                    },
                })
            }
            else {
                Toast.show({
                    content: '取消收藏',
                    afterClose: () => {
                        console.log('after')
                    },
                })
            }
        })

    }
    render() {
        return (
            <div className='details'>
                <header>
                    <NavBar onBack={() => { this.back() }}>详情页</NavBar>
                </header>
                <main>
                    <Swiper loop autoplay style={{ '--height': '50%' }} className='swiper'>{
                        this.state.bannerlist.map((item: any, index: number) => {
                            return (
                                <Swiper.Item key={index} >
                                    <img src={item} alt="" />
                                </Swiper.Item>
                            )
                        })
                    }</Swiper>

                    <div className="top10">
                        <h3>
                            <span>￥{Math.ceil(this.state.proDetails.originprice * this.state.proDetails.discount / 10)}</span> 限时秒杀！
                        </h3>
                        <Ellipsis direction='end' rows={1} content={this.state.proDetails.proname} />
                        <Ellipsis direction='end' rows={4} content={this.state.proDetails.desc} />
                    </div>

                </main>
                <footer>
                    <div className='tabs'>
                        <div className="tab">
                            <UserContactOutline fontSize={20} />
                            <span>客服</span>
                        </div>
                        <div className="tab" onClick={()=>{this.props.history.push('/index/cart')}}>
                            <ShopbagOutline fontSize={20} />
                            <span>购物车</span>
                        </div>
                        <div className="tab" onClick={this.isCollect.bind(this)}>
                            {this.state.collect ? <StarFill fontSize={20} /> : <StarOutline fontSize={20} />}
                            <span>{this.state.collect ? '取消' : '收藏'}</span>
                        </div>
                    </div>
                    <div className='buycart'>
                        <div className='addCart' onClick={() => { this.addCart() }}>
                            加入购物车
                        </div>
                    </div>
                </footer>
            </div>
        );
    }
}

export default Details;